<template>
  <div class="table-container">
    <div class="home swiper">
      <h2>轮播图</h2>
      <div class="item" v-for="(item, index) in itemcontent.homeSwiperlist" :key="index">
        <div class="uploadbox">
          <vab-upload
            :toptitle="'首页轮播图' + (index + 1)"
            :limit="1"
            name="Swiper"
            :size="2"
            :imgfileList="item.swiperlist"
            @succestList="(e) => succestlist(e, item, 0)"
          />
          <div class="font">
            跳转
            <i class="el-icon-right"></i>
          </div>
          <vab-upload
            toptitle="轮播图详情图"
            :limit="1"
            name="Swiper"
            :size="2"
            :imgfileList="item.infolist"
            @succestList="(e) => succestlist(e, item, 1)"
          />
        </div>
        <el-tooltip effect="dark" content="是否可以跳转详情页" placement="top">
          <el-switch
            @change="changeSwitch(item)"
            v-model="item.isShow"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-tooltip>
      </div>
    </div>
    <div class="bookshelf swiper">
      <h2>咨询信息列表</h2>
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
            <el-form-item>
              <el-input v-model="queryForm.title" placeholder="标题" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.typeId" placeholder="请选择分类">
                <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <el-button icon="el-icon-search" native-type="submit" type="success" @click="handleAdd">添加</el-button>
        </vab-query-form-right-panel>
      </vab-query-form>
      <el-table border ref="tableSort" v-loading="listLoading" :data="list" element-loading-text="正在加载..." height="70vh">
        <el-table-column label="序号" show-overflow-tooltip width="50" prop="id" />
        <el-table-column label="标题" prop="title" show-overflow-tooltip width="150" />
        <el-table-column label="书籍封面" show-overflow-tooltip>
          <template #default="{ row }">
            <el-image :src="$baseImageUrl + row.imgPath" />
          </template>
        </el-table-column>
        <el-table-column label="类别" prop="content" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ getTypeName(scope.row.typeId) }}
          </template>
        </el-table-column>

        <el-table-column label="内容" prop="content" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ getSimpleText(scope.row.content) }}
          </template>
        </el-table-column>
        <el-table-column label="上传时间" prop="createTime" show-overflow-tooltip width="200" />
        <el-table-column label="排序" prop="sort" align="center" show-overflow-tooltip width="100" />
        <el-table-column label="操作" show-overflow-tooltip width="200px" align="center">
          <template #default="{ row }">
            <el-button size="mini" type="warning" @click="handleEdit(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :background="true"
        :current-page="queryForm.pageNum"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <table-edit ref="edit" @fetch-data="fetchListData" />
    </div>
  </div>
</template>

<script>
  import TableEdit from './components/TableEdit'
  import { SelSwiper, SetSwiper, SelText, DelText } from '@/api/ad'
  import { SelTextType } from '@/api/userManagement'
  import VabUpload from '@/components/VabUpload'

  export default {
    components: {
      VabUpload,
      TableEdit,
    },
    name: 'Index',
    data() {
      return {
        typeList: [],
        layout: 'total, sizes, prev, pager, next, jumper',
        queryForm: {
          typeId: 0,
          pageNum: 1,
          pageSize: 20,
          title: '',
        },
        list: [],
        total: 0,
        listLoading: true,
        itemcontent: {
          homeSwiperlist: [
            {
              swiperlist: [],
              infolist: [],
            },
          ],
          bookShelfSwiperlist: [
            {
              swiperlist: [],
              infolist: [],
            },
          ],
        },
      }
    },
    async created() {
      let { data } = await SelTextType({ typeName: '' })
      this.typeList = [...[{ id: 0, typeName: '全部' }], ...data]
      this.fetchdata()
      this.fetchListData()
    },

    mounted() {},
    methods: {
      getSimpleText(html) {
        var re1 = new RegExp('<.+?>', 'g') // 匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
        var msg = html.replace(re1, '') // 执行替换成空字符
        msg = msg.replace(/&nbsp;/g, ' ') // 去除 &nbsp;
        return msg.slice(0, 100)
      },
      getTypeName(id) {
        let item = this.typeList.find((item) => item.id === id)
        return id === 0 ? '未设置分类' : item.typeName
      },
      handleAdd() {
        this.$refs['edit'].showEdit()
      },
      handleEdit(row) {
        this.$refs['edit'].showEdit(row)
      },
      handleQuery() {
        this.queryForm.pageNum = 1
        this.fetchListData()
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchListData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchListData()
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await DelText({ id: row.id })
            this.$baseMessage(msg, 'success')
            this.fetchListData()
          })
        }
      },
      async changeSwitch(e) {
        let box = Object.assign({}, e)
        delete box.swiperlist
        delete box.infolist
        let { data } = await SetSwiper(box)
        this.fetchdata()
      },
      fetchdata() {
        SelSwiper().then((res) => {
          this.itemcontent = res.data
          this.itemcontent['homeSwiperlist'] = this.itemcontent['homeSwiperlist'].map((item) => ({
            ...item,
            swiperlist: [{ url: this.$baseImageUrl + item.swiperImgPath }],
            infolist: [{ url: this.$baseImageUrl + item.memo }],
          }))
        })
      },
      async fetchListData() {
        this.listLoading = true
        const { data } = await SelText(this.queryForm)
        this.list = data.records
        this.total = data.total
        this.timeOutID = setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
      async succestlist(e, item, type) {
        let box = Object.assign({}, item)
        if (type === 0) {
          box.swiperImgPath = e[0].response.data
        } else {
          box.memo = e[0].response.data
        }
        delete box.swiperlist
        delete box.infolist
        try {
          let { data } = await SetSwiper(box)
          this.fetchdata()
        } catch (error) {
          // 处理错误
          console.error(error)
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .table-container {
    display: flex;
    justify-content: space-between;
    .swiper {
      height: 100%;
      .item {
        padding: $base-padding;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        border-radius: 4px;
        flex: 1;
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        .uploadbox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .font {
            font-size: 18px;
            font-weight: 550;
          }
        }
      }
    }
    .home {
      width: 30%;
    }
    .bookshelf {
      flex: 0.98;
    }
  }
</style>
